这篇是对使用API搜集需要的数据并传回到app中的总结。涉及三个应用:random quotelocal weather以及wikipedia viewer。实质是利用jsonp进行跨域请求。

1. jsonp的介绍和使用

这篇文章是我目前见过的对jsonp最清晰和简单的描述,感谢这位大神!

2. random quote

第一次接触api的应用,由于今年6月codepen开始全面使用https协议,所以原本使用http的api已经无法正常显示,目前没有找到好的解决办法。
使用的api地址如下:

http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?

endpoint: http://api.forismatic.com/api/1.0/
?: 端点和参数的分割
=: 匹配参数和参数值
&: 连接两个不同的参数
jsonp=?: jsonp是callback,即获得回调函数名的参数名,等号后面可以写回调函数名,写?则会由jQuery自动处理。

一个简单的实践:

function randomQuote() {
    var url = "http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?";
    $.getJSON(url, function(json) {
      $("#quote").text(json.quoteText);
      $("#author").text("--" + json.quoteAuthor);
    });
}

返回的数据依照相应的参数名进行调用即可。

3. local weather

这个应用使用了两个api。
获取天气数据使用了darksky的api:

https://api.darksky.net/forecast/37afbe1af1965b09f5c7e0c6f710fc34/" + latitude + “,” + longitude + “/?units=auto&callback=?”

获取位置数据使用了google map的api:

google_map_url = “https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + “,” + longitude + “&key=xxxxxxx&language=en”

其中的latitude和longitude是使用navigator.geolocation.getCurrentPosition()获取的,详细文档点击此处,简单的使用方法如下:

navigator.geolocation.getCurrentPosition(function(position) {
    var latitude;
    var longitude;
    latitude = position.coords.latitude; 
    longitude = position.coords.longitude; 
    //其他函数
}

4. wikipedia viewer

Wikipedia的api使用起来感觉相当复杂,点击此处的使用文档。下面是应用中对地址的具体表示:

var url = “https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&prop=extracts&utf8=&srlimit=10&srsearch=";

var val = $(“#search”).val() + “&callback=?”;

url += val;

5. 实际跨域调用

使用jQuery的getJson函数。

$.getJSON(google_map_url, function(json){//});